<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .tab-pane {
            padding: 30px 0 50px;
        }

        .input-daterange {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .sel-tit {
            line-height: 34px;
        }

        .patient-num {
            height: 34px;
            line-height: 34px;
        }

        .patient-num i {
            margin-left: 10px;
        }

        .all-patient-pic {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-bottom: -2px;
            border-radius: 50%;
            background-color: #66CCFF;
        }

        .new-patient-pic {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-bottom: -2px;
            border-radius: 50%;
            background-color: #FF0000;
        }

        .title-h3 {
            margin-top: 50px;
        }

        .echart {
            height: 350px;
        }

        .ctrl-row {
            padding-bottom: 30px;
        }

        table th, td {
            text-align: center;
            vertical-align: middle;
        }

        #bed-num-model {
            display: none;
        }

        .bed-num .bed-sm {
            position: relative;
        }

        .bed-sm p {
            height: 35px;
            line-height: 35px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding-left: 5px;
        }

        #bed-lg {
            width: 350px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            position: absolute;
            top: 35px;
            left: 0;
            background-color: #fff;
            z-index: 200;
        }

        #bed-lg > div:first-child {
            border-bottom: 1px solid #ccc;
            margin-bottom: 1em;
        }

        #bed-lg > div > div {
            height: 2.5em;
        }

        #bed-lg > div:last-child b {
            font-weight: normal;
            width: 2.5em;
            padding: 5px 0;
            border-radius: 5px;
        }

        #bed-lg > div:last-child span {
            padding: 5px;
        }

        #bed-lg > div:last-child > div:nth-child(1) > b {
            background-color: #0099CC;
        }

        #bed-lg > div:last-child > div:nth-child(2) > b {
            background-color: #66CCCC;
        }

        #bed-lg > div:last-child > div:nth-child(3) > b {
            background-color: #A889E9;
        }

        #bed-lg > div:last-child > div:nth-child(4) > b {
            background-color: #CC99FF;
        }

        #bed-lg > div:last-child > div:nth-child(5) > b {
            background-color: #33CC66;
        }

        #patient-tabel {
            border-collapse: collapse;
        }

        .ui-jqgrid-hdiv, .ui-jqgrid-hbox, .ui-jqgrid-htable, .ui-jqgrid-bdiv, .ui-jqgrid-btable {
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .base-info {
            border-bottom: 1px solid #666;
        }

        .base-info > ul > li {
            height: 25px;
            line-height: 25px;
            margin-right: 15px;
        }

        .total-row {
            font-size: 16px;
            font-weight: bold;
        }

        .count-row {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .count-row p {
            margin-bottom: 5px;
        }

        .count-col {
            border-radius: 5px;
            background-color: #F2F2F2;
            margin-bottom: 20px;
            margin-right: 15px;
            padding-top: 10px;
        }

        .count-col-lg {
            padding-top: 15px;
            padding-bottom: 10px;
        }

        .count-col p:first-child {
            font-size: 16px;
            font-weight: bold;
        }

        .count-col p:last-child {
            font-size: 12px;
        }

        .count-col-color1 {
            background-color: #66CCFF;
        }

        .count-col-color2 {
            background-color: #6699FF;
        }

        .count-col-color3 {
            background-color: #66CCCC;
        }

        #tab2-person-count .table > thead > tr > th,
        #tab2-person-count .table > tbody > tr > th,
        #tab2-person-count .table > tfoot > tr > th,
        #tab2-person-count .table > thead > tr > td,
        #tab2-person-count .table > tbody > tr > td,
        #tab2-person-count .table > tfoot > tr > td {
            vertical-align: middle;
        }

        #tab2-person-count .progress {
            margin-bottom: 0;
        }

        #tab3-detail-item {
            margin-top: 2em;
        }

        .detail-item {
            margin-bottom: 1.5em;
        }

        .detail-item > div {
            height: 4em;
            padding-top: .5em;
            padding-bottom: .5em;
            border: 2px solid #797979;
            border-radius: 5em;
        }

        .detail-item > div > p {
            padding: 0;
            margin: 0;
            height: 1.5em;
            line-height: 1.5em;
        }

        .detail-item .detail-item-name {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        #tab3-total {
            margin-right: 2em;
        }

        .detail-list {
            margin-bottom: 1em;
        }

        .detail-list-div {
            padding: 5px;
            background-color: #ccc;
            border-radius: 10px;
        }

        .detail-list p {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-bottom: 0;
        }

        .patient-sums-count {
            background-color: #FFF2CB;
            border-radius: 5px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 15px;
        }

        .new-patient-sums-count {
            font-size: 14px;
            margin: 20px 0;
            line-height: 34px;
        }

        #div_tab .nav-tabs {
            border-bottom: none;
        }

        #div_tab .nav-tabs > li > a {
            font-size: 18px;
            color: #B5B5B5;
            border: 1px solid #B5B5B5;
            margin-right: 15px;
            padding: 5px 10px;
            border-radius: 20px;
        }

        #div_tab .nav-tabs > li.active > a {
            color: #fff;
            background-color: #24CA99;
            border: 1px solid #24CA99;
        }

        .layui-tab-item {
            width: 100%;
        }
    </style>
</head>
<body>
<form class="layui-form" lay-filter="therapist-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">时间范围</label>
            <div class="layui-input-inline">
                <input class="layui-input ares-w-auto" readonly id="therapist-date" placeholder=" - ">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">选择分组</label>
            <div class="layui-input-inline">
                <select name="therapist-group-select" lay-filter="therapist-group-select"></select>
            </div>
        </div>
    </div>
</form>
<div id="therapist-echart1" class="echart"></div>

<div id="therapist-brief">
    <div id="therapist-all-cost"></div>
    <div id="therapist-echart2" class="echart"></div>
    <table id="therapist-count-table" class="layui-hide" lay-filter="therapist-count-table"></table>
</div>
<div id="therapist-details" class="layui-hide">
    <div>
        <span>治疗师 : <b id="tab3-therapist"></b></span>
        <span class="ares-mx-lg">分组 : <b id="tab3-group"></b></span>
        <span>收款明细 : <b id="tab3-cost"></b></span>
    </div>
    <div id="tab3-count-btns">
        <button data-type="1" class="layui-btn layui-btn-xs layui-btn-normal">评估明细</button>
        <button data-type="2" class="layui-btn layui-btn-xs">训练明细</button>
    </div>
    <div id="tab3-detail-item"></div>
    <div class="ares-text-right">
        共计 : <span id="tab3-total"></span>
    </div>
</div>


<div id="list-modal" class="ares-col-md-3 detail-list layui-hide">
    <div class="detail-list-div">
        <p>
            <b class="detail-list-name">脑瘫肢体综合训练（次）</b>
            <b class="detail-list-times">30</b>
        </p>
        <span>总金额 (元) : <span class="detail-list-fee"></span></span>
    </div>
</div>

<div id="detail-modal" class="detail-item ares-col-md-3 ares-col-lg-2 layui-hide">
    <div class="text-center">
        <p class="detail-item-name"></p>
        <p class="detail-item-cost"></p>
    </div>
</div>
<!-- 床位模板 -->
<div id="bed-sm-model" class="bed-num ares-col-sm-4 ares-col-md-3 layui-hide">
    <span></span>
    <div class="bed-sm">
        <p></p>
    </div>

</div>
<!-- 床位hover视图模板 -->
<div id="bed-lg-modal" class="clearfix layui-hide">
    <div class="clearfix">
        <div class="ares-col-md-6">
            患者编号 : <span class="bed-lg-number"></span>
        </div>
        <div class="ares-col-md-6">
            姓名 : <span class="bed-lg-name"></span>
        </div>
        <div class="ares-col-md-6">
            总收费 : <span class="bed-lg-total"></span>
        </div>
        <div class="ares-col-md-6">
            入院天数 : <span class="bed-lg-day"></span>
        </div>
    </div>
    <div class="clearfix">
        <div class="ares-col-md-6">
            <b class="pull-left text-center">PT</b><span class="pull-left bed-lg-therapist PT"></span>
        </div>
        <div class="ares-col-md-6">
            <b class="pull-left text-center">OT</b><span class="pull-left bed-lg-therapist OT"></span>
        </div>
        <div class="ares-col-md-6">
            <b class="pull-left text-center">儿童</b><span class="pull-left bed-lg-therapist ET"></span>
        </div>
        <div class="ares-col-md-6">
            <b class="pull-left text-center">ST</b><span class="pull-left bed-lg-therapist ST"></span>
        </div>
        <div class="ares-col-md-6">
            <b class="pull-left text-center">理疗</b><span class="pull-left bed-lg-therapist LL"></span>
        </div>
    </div>
</div>

<script type="text/html" id="therapistCountTab">
    <button class="layui-btn layui-btn-xs" lay-event="detail">详情</button>
</script>
<script>
    $(function ($) {
        var defaultStartTime = +new Date().setMonth(new Date().getMonth() - 1),
            defaultEndTime = +new Date();
        var type = 1,
            detailTherapistId = "",
            pieName = [],
            pieValue = [],
            pieOption = {
                title: {
                    subtext: "按治疗组",
                    left: 70,
                    top: 20
                },
                tooltip: {
                    trigger: 'item',
                    confine: true,
                    formatter: "{b} : ({c}元) ({d}%)"
                },
                legend: {
                    top: 'bottom',
                    itemWidth: 14,
                    data: pieName
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['60%', '85%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: pieValue,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
                color: ['#33CC66', '#3399FF', '#FF0000', '#9966CC', 'pink']
            },
            lineX = [],
            lineY = [],
            lineOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    /*feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }*/
                },
                legend: {
                    data: ['治疗师收费']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: lineX,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '费用(元)',
                        /* min: 0,
                    max: 250,
                    interval: 30, */
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '收费',
                        type: 'bar',
                        data: lineY
                    }
                ]
            };

        renderTreatmentGroup('therapist-form', 'therapist-group-select');
        laydate.render({
            elem: '#therapist-date',
            range: true,
            value: dateFilters.dateFormat(defaultStartTime) + ' - ' + dateFilters.dateFormat(defaultEndTime),
            done: function (value, date, endDate) {
                var range = value.split(' - '),
                    groupId = form.val('therapist-form')['therapist-group-select'];
                getPie(+new Date(range[0]), +new Date(range[1]));
                getLineAndTable(groupId, +new Date(range[0]), +new Date(range[1]));
                countCost(detailTherapistId, +new Date(range[0]), +new Date(range[1]), type);
            }
        });
        form.on('select(therapist-group-select)', function (data) {
            var range = $('#therapist-date').val().split(' - '),
                groupId = form.val('therapist-form')['therapist-group-select'];
            getLineAndTable(groupId, +new Date(range[0]), +new Date(range[1]));
        });
        getPie(defaultStartTime, defaultEndTime);
        getLineAndTable(form.val('therapist-form')['therapist-group-select'], defaultStartTime, defaultEndTime);
        countCost(detailTherapistId, defaultStartTime, defaultEndTime, type);

        //治疗师收费饼图
        function getPie(startDate, endDate) {
            mandyServices.mandy_get_overall_charges_static(startDate, endDate).then(function (res) {
                console.log('治疗师收费饼图', res)
                var data = res.data,
                    chargesStaticDTOs = data.chargesStaticDTOs;
                $.each(chargesStaticDTOs, function (idx, list) {
                    pieName.push(list.groupName);
                    pieValue[idx] = {};
                    pieValue[idx].name = list.groupName;
                    pieValue[idx].value = list.total;
                })
                var therapistEchart1 = echarts.init($("#therapist-echart1")[0]);
                therapistEchart1.setOption(pieOption);
            })
        }

        //治疗师收费柱状图及列表
        function getLineAndTable(groupId, startDate, endDate) {
            mandyServices.mandy_get_overall_charges_static_detail(groupId, startDate, endDate).then(function (res) {
                console.log('治疗师收费柱状图', res)
                var data = res.data,
                    chargesStaticDTOs = data.chargesStaticDTOs || [];
                $("#therapist-all-cost").text("收费总数 : " + data.total + "元");
                $.each(chargesStaticDTOs, function (index, item) {
                    var chargesDTOs = item.chargesDTOs;
                    var e = {},
                        t = {};
                    $.each(chargesDTOs, function (i, v) {
                        if (v.itemType == 1) {
                            e.number = v.number;
                            e.fee = v.fee;
                        } else if (v.itemType == 2) {
                            t.number = v.number;
                            t.fee = v.fee;
                        }
                    })
                    item.e = e;
                    item.t = t;
                })
                table.render({
                    elem: '#therapist-count-table',
                    data: chargesStaticDTOs,
                    cellMinWidth: 80,
                    cols: [[
                        {title: '治疗师', field: 'therapistName'},
                        {title: '分组', field: 'groupName'},
                        {title: '收费', field: 'total'},
                        {
                            title: '评估次数',
                            templet: function (d) {
                                return d.e.number;
                            }
                        },
                        {
                            title: '评估收费',
                            templet: function (d) {
                                return d.e.fee;
                            }
                        },
                        {
                            title: '训练次数', width: 150,
                            templet: function (d) {
                                return d.t.number;
                            }
                        },
                        {
                            title: '训练收费', width: 150,
                            templet: function (d) {
                                return d.t.fee;
                            }
                        },
                        {title: '操作', fixed: 'right', width: 60, templet: '#therapistCountTab'}
                    ]]
                });
                table.on('tool(therapist-count-table)', function (obj) {
                    switch (obj.event) {
                        case 'detail':
                            checkDetail(obj.data);
                            break;
                    }
                    ;
                });
                var chart = data.chart;
                lineX.length = 0;
                lineY.length = 0;
                $.each(chart, function (idx, list) {
                    lineX.push(list.date);
                    lineY.push(list.fee);
                })
                var therapistEchart2 = echarts.init($("#therapist-echart2")[0]);
                therapistEchart2.setOption(lineOption);
            })
        }

        //治疗师收费列表查看详情
        function checkDetail(data) {
            detailTherapistId = data.therapistId;
            type = 1;
            $("#therapist-brief").addClass("layui-hide");
            $("#therapist-details").removeClass("layui-hide");
            $("#tab3-count-btns button[data-type = 1]").addClass("layui-btn-normal").siblings().removeClass("layui-btn-normal");
            var timeRange = $('#therapist-date').val().split(' - ');
            var tab3_detail_item = $("#tab3-detail-item");
            tab3_detail_item.empty();
            mandyServices.mandy_get_therapist_charges_static(detailTherapistId, +new Date(timeRange[0]), +new Date(timeRange[1])).then(function (res) {
                var data = res.data;
                $("#tab3-therapist").text(data.therapistName);
                $("#tab3-group").text(data.groupName).data("groupId", data.groupId);
                $("#tab3-cost").text("总额 " + data.total + "元");
                var chargesDTOs = data.chargesDTOs;
                var items = [];
                $.each(chargesDTOs, function (i, v) {
                    if (v.itemType == type) {
                        items[type] = v;
                    }
                })
                $("#tab3-total").text(items[type].number + "次 / " + items[type].fee + "元");
                $.each(items[type].chargeDetailDTOs, function (idx, val) {
                    var clone = $("#detail-modal").clone(true, true).attr("id", "detail-item-" + idx).removeClass("layui-hide");
                    clone.find(".detail-item-name").text(val.item_name).attr("title", val.item_name);
                    clone.find(".detail-item-cost").text(val.number + " 次 / " + val.fee + "元");
                    tab3_detail_item.append(clone);
                })
            })
        }

        //治疗师收费列表查看详情(评估\训练切换)
        function countCost(therapistId, startTime, endTime, type) {
            var groupId = $("#tab3-group").data("groupId");
            var tab3_detail_item = $("#tab3-detail-item");
            tab3_detail_item.empty();
            mandyServices.mandy_get_therapist_charges_static(therapistId, startTime, endTime).then(function (res) {
                var data = res.data;
                $("#tab3-cost").text("总额 " + data.total + "元");
                var chargesDTOs = data.chargesDTOs;
                var items = [];
                $.each(chargesDTOs, function (i, v) {
                    if (v.itemType == type) {
                        items[type] = v;
                    }
                })

                $("#tab3-total").text(items[type].number + "次 / " + items[type].fee + "元");
                $.each(items[type].chargeDetailDTOs, function (idx, val) {
                    var clone = $("#detail-modal").clone(true, true).attr("id", "detail-item-" + idx).removeClass("layui-hide");
                    clone.find(".detail-item-name").text(val.item_name).attr("title", val.item_name);
                    clone.find(".detail-item-cost").text(val.number + " 次 / " + val.fee + "元");
                    tab3_detail_item.append(clone);
                })
            })
        }

        $("#tab3-count-btns button").click(function () {
            var timeRange = $('#therapist-date').val().split(' - ');
            type = $(this).data("type");
            $(this).addClass("layui-btn-normal").siblings().removeClass("layui-btn-normal");
            countCost(detailTherapistId, +new Date(timeRange[0]), +new Date(timeRange[1]), type)
        })

    })
</script>
</body>
</html>